<template>
  <div class="home">
    <top-bg class="top-bg" />
    <n-grid x-gap="0 800:18" item-responsive style="padding-bottom: 20px">
      <n-gi span="1 800:1 1200:3" />
      <n-gi span="22 800:16 1200:14">
        <swiper-card />
        <card
          v-for="(item, index) in list"
          :data="item"
          :key="item.id"
          :floatLeft="index % 2 == 0"
        />
      </n-gi>
      <n-gi span="0 800:6 1200:4">
        <user-card style="margin-top: 20px" />
        <threejs-card style="height: 200px; margin-top: 20px" />
        <notice-card />
        <!-- <love-card /> -->
        <new-essay />
        <tags-card />
        <n-gi span="1 800:0" />
      </n-gi>
    </n-grid>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="pageNum"
      v-model:limit="pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="Home">
import topBg from './components/topBg.vue';
import SwiperCard from '@/components/SwiperCard/index.vue';
import Card from '@/components/Card/index.vue';
import UserCard from '@/components/UserCard/index.vue';
import ThreejsCard from '@/components/ThreejsCard/index.vue';
import NoticeCard from '@/components/NoticeCard/index.vue';
import NewEssay from '@/components/NewEssay/index.vue';
import LoveCard from '@/components/LoveCard/index.vue';
import TagsCard from '@/components/TagsCard/index.vue';
import Pagination from '@/components/Pagination/index.vue';
import { getArticle } from '@/api/home.js';
import { ref, onMounted } from 'vue';

const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);

const list = ref([]);

const getList = () => {
  getArticle({
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }).then((res) => {
    total.value = res.total;
    list.value = res.list;
  });
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.top-bg {
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}
</style>
